import reactLogo from '@/assets/react.svg'

const ChapOne: React.FC = () => {
  return (
    <div>
      {/* 如果要切换成light，需要删除dark */}
      <div className="tailwind-container dark:bg-amber-600 bg-blue-700 ">
        <div className="font-mono rounded-lg bg-card text-card-foreground">
          <h3 className="relative">ccc</h3>
          <h3 className="relative">ddd</h3>
        </div>
        <div className="font-htime fill-accent">
          <h3 className="relative">ccc</h3>
          <h3 className="relative">ddd</h3>
        </div>
        <div className="font-mono htime-complex-utility">
          <h3 className="relative child">
            <pre>ddd</pre>
          </h3>
        </div>
        <div>
          <h3 className="relative htime-text-utility-4 htime-text-utility-[8] whitespace-pre">&#0009;ddd8</h3>
          <h3 className="relative htime-text-utility-4 htime-text-utility-[16] whitespace-pre">&#0009;ddd16</h3>
          <h3 className="relative htime-text-utility-[20] whitespace-pre">&#0009;ddd4</h3>
        </div>

        <div className="lg">
          <h3 className="htime-lineheight-utility-[2rem]/[3]">ccc</h3>
          <h3 className="text-sm/tight">ddd</h3>
        </div>

        {/* <div>
          <h3 className="aspect-1/4">aspect</h3>
        </div> */}
      </div>

      <div>
        <p className="tailwind-func-alpha">华语乐坛姓什么？？</p>
        <p className="py-[calc(--spacing(4)-1px)]">周杰伦，林俊杰不错</p>
      </div>
    </div>
  )
}

const Button: React.FC<{ size: string; children: React.ReactNode }> = ({ size, children }) => {
  const sizeClasses = {
    md: 'px-4 py-2 rounded-md text-base',
    lg: 'px-5 py-3 rounded-lg text-lg',
  }[size]
  return (
    <button type="button" className={`border font-bold ${sizeClasses}`}>
      {children}
    </button>
  )
}

const ChapTwo: React.FC = () => {
  return (
    <>
      <div className="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
        <img className="size-12 shrink-0" src={reactLogo} alt="ChitChat Logo" />
        <div>
          <div className="text-xl font-medium text-black dark:text-white">ChitChat</div>
          <p className="text-gray-500 dark:text-gray-400">You have a new message!</p>
        </div>
      </div>
      <div className="flex flex-col gap-2 p-8 sm:flex-row sm:items-center sm:gap-6 sm:py-4 max-w-sm mx-auto mt-4 rounded-lg dark:bg-white">
        <img className="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0" src="/src/assets/erin-lindford.jpg" alt="" />
        <div className="space-y-2 text-center sm:text-left">
          <div className="space-y-0.5">
            <p className="text-lg font-semibold text-black">Erin Lindford</p>
            <p className="font-medium text-gray-500">Product Engineer</p>
          </div>
          <button className="active:bg-purple-700 border border-purple-200 font-semibold hover:bg-purple-600 hover:border-transparent hover:text-white px-4 py-1 rounded-full text-purple-600 text-sm">
            Message
          </button>
        </div>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 p-4">
        {Array.from({ length: 6 }).map((_, index) => (
          <div key={index} className="bg-blue-500 p-4 text-center rounded-lg">
            {index + 1}
          </div>
        ))}
      </div>
      <div className="blur-sm grayscale [--gutter-width:1rem] lg:[--gutter-width:2rem]">
        <div className="text-[var(--gutter-width)]">我爱你这个</div>
      </div>
      <div className="flex gap-4 group">
        <Button size="md">cccc</Button>
        <Button size="lg">cccc</Button>
        <button data-current={true} className="dark:lg:data-current:hover:bg-indigo-600">
          cccccccc
        </button>
        <button className="group-hover:bg-amber-600">ddddddd</button>
        <div className="[&>[data-active]+span]:text-blue-600 ...">
          <span data-active>ddd</span>
          <span>This text will be blue</span>
        </div>
        <div className="[@supports(display:grid)]:grid [&_p]:mt-4">
          <div>
            <p>1</p>
          </div>
          <div>
            <p>2</p>
          </div>
        </div>
      </div>
    </>
  )
}
export default function App() {
  return (
    <>
      <ChapOne />
      <ChapTwo />
    </>
  )
}
